<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vue3</title>
  </head>

  <body>
    <div id="app">
      <!-- 5. 模板中创建账号输入框（v-model 绑定 text）和密码输入框（v-model 绑定 password） -->
      账户：<input type="text" v-model="text" /> <br /><br />
      密码：<input type="password" v-model="password" /> <br /><br />
      <!-- 6. 登录按钮绑定 @click="login"，重置按钮绑定 @click="reset"
 -->
      <button @click="login">登录</button>
      <button @click="reset">重置</button>
      <!-- 7. 用 {{text}} 和 {{password}} 实时显示输入内容
 -->
      <h3>text:{{text}}-password:{{password}}</h3>
    </div>

    <!-- 
    
1. 引入 Vue 3，获取 createApp 和 ref
-->

    <script src="vue3.js"></script>
    <script>
      // 1. 引入 Vue 3，获取 createApp 和 ref
      const { createApp, ref } = Vue;
      const app = createApp({
        // 2. 创建应用，setup 中用 ref 定义 text（账号）和 password（密码）响应式数据
        setup() {
          const text = ref(""); // 创建响应式数据存储用户名，初始值为空字符串
          const password = ref(""); // 创建响应式数据存储密码，初始值为空字符串
          //   3. 定义 login 函数（打印账号密码）和 reset 函数（清空输入）
          const login = () => {
            // 定义登录事件处理函数
            console.log(text.value, password.value); // 打印用户输入的账号和密码
          };
          // 定义一个重置函数
          const reset = () => {
            // 定义重置事件处理函数
            text.value = ""; // 清空用户名输入框
            password.value = ""; // 清空密码输入框
          };

          return {
            // 4. 返回 text、password 及两个函数供模板使用

            text, // 返回响应式数据text
            password, // 返回响应式数据password
            login, // 返回登录函数
            reset, // 返回重置函数
          };
        },
      });
      // 8. 将应用挂载到 #app 元素上
      app.mount("#app");
    </script>
  </body>
</html>
